<template>
    <div class="dialog">
        <!-- 语义化 -->
        <header>
            <!-- <h3>友情提示</h3> -->
            <slot name="header"></slot>
        </header>
        <main>
            <!-- <p>{{ msg }}</p> -->
            <!-- slot插槽，作用：提前占位，将来写在父组件标签内的结构，就会替换这个标签 -->
            <!-- <slot></slot> -->
              <!-- 中间这块最好也写上默认名字 -->
            <slot name="default"></slot>
        </main>
        <footer>
            <!-- <button>关闭</button> -->
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

<script>
// 使用插槽 
//  1. 子组件中使用slot占位，把不希望写死的地方用slot占位
//  2. 在父组件中使用带有插槽slot组件的时候，组件标签之间传入结构
export default {
    props:{
        msg:String
    }
}
</script>

<style lang="less">
.dialog{
    width: 300px;
    height: 200px;
    border: 2px solid skyblue;
    margin: 50px auto;
    padding: 20px;
}
</style>